<ul #ulRef *ngIf="options&&options.length > 0 else nodatatemplate" [id]="appendId('list')">
  <ng-container *ngFor="let option of options; let i = index">
    <ng-container *ngTemplateOutlet="optionTemplate; context:  {$implicit: option, items:options, index: i, liid: i}"> </ng-container>
  </ng-container>
</ul>
<!-- no data模板 -->
<ng-template #nodatatemplate>
  <div class="ti3-dropdown-no-data" [innerHtml]="noDataText"></div>
</ng-template>
<!-- 分组和选项的模板 -->
<ng-template #optionTemplate let-item let-items="items" let-i="index" let-lid="liid"
  ><!--两层模板嵌套，有点难理解-->
  <!--相对于list，样式有调整-->
  <li
    #liRefs
    class="ti3-menu-panel-list"
    [ngClass]="{'ti3-menu-panel-list-disabled':isDisabledFn(item),
                'ti3-menu-groupId' : hasBorder(item,items),
                'ti3-menu-panel-list-hover': item === hoverOption}"
    (mousedown)="onMousedownItem($event, liRefs)"
    (mouseup)="onMouseupItem($event, liRefs)"
    (click)="onClickItem($event, item)"
    (mouseenter)="onMouseenterItem($event, item)"
    (mouseleave)="onMouseleaveItem($event, liRefs)"
    [id]="appendId(item.id || lid)"
  >
    <section
      style="display: inline"
      *ngIf="isGroup(item)"
      class="ti3-menu-list-icon"
      [ngClass]="{'ti3-menu-list-left-icon' : panelAlign === 'right',
                          'ti3-menu-list-right-icon' : panelAlign === 'left'}"
    ></section>
    <ng-container *ngIf="itemTemplate else labelTemplate">
      <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"> </ng-container>
    </ng-container>
    <ng-template #labelTemplate>{{item[labelKey]}}</ng-template>
  </li>
</ng-template>
